import React, { useState, useEffect } from 'react';

const WeatherPage: React.FC = () => {
  const [weatherData, setWeatherData] = useState({
    city: '北京',
    temp: '28℃',
    condition: '晴朗',
    minTemp: '25℃',
    maxTemp: '32℃',
    wind: '微风',
    humidity: '45%',
  });

  // 模拟实时更新天气
  useEffect(() => {
    const interval = setInterval(() => {
      const conditions = ['晴朗', '多云', '少云', '微风'];
      const randomCondition = conditions[Math.floor(Math.random() * conditions.length)];
      setWeatherData(prev => ({ ...prev, condition: randomCondition }));
    }, 5000);
    return () => clearInterval(interval);
  }, []);

  return (
    <div
      style={{
        marginLeft: '70px',
        height: '100vh',
        background: 'rgba(255, 248, 250, 1)',
        padding: '40px',
        color: '#333',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <h1 style={{ color: '#d946ef', marginBottom: '40px', fontSize: '28px' }}>天气查询</h1>
      <div
        style={{
          background: 'white',
          borderRadius: '24px',
          padding: '40px',
          boxShadow: '0 4px 20px rgba(255, 182, 193, 0.15)',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          width: 'max-content',
        }}
      >
        <span style={{ fontSize: '80px', color: '#FFD700', marginBottom: '20px' }}>🌞</span>
        <h2 style={{ margin: '0 0 10px 0', color: '#333', fontSize: '32px' }}>{weatherData.city}</h2>
        <div style={{ fontSize: '64px', color: '#d946ef', margin: '20px 0' }}>{weatherData.temp}</div>
        <div style={{ fontSize: '24px', color: '#881337', marginBottom: '30px' }}>{weatherData.condition}</div>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(2, 1fr)',
            gap: '20px',
            width: '100%',
          }}
        >
          <div style={{ textAlign: 'center' }}>
            <p style={{ color: '#999', fontSize: '14px' }}>最低温度</p>
            <p style={{ fontSize: '18px', color: '#333' }}>{weatherData.minTemp}</p>
          </div>
          <div style={{ textAlign: 'center' }}>
            <p style={{ color: '#999', fontSize: '14px' }}>最高温度</p>
            <p style={{ fontSize: '18px', color: '#333' }}>{weatherData.maxTemp}</p>
          </div>
          <div style={{ textAlign: 'center' }}>
            <p style={{ color: '#999', fontSize: '14px' }}>风向风力</p>
            <p style={{ fontSize: '18px', color: '#333' }}>{weatherData.wind}</p>
          </div>
          <div style={{ textAlign: 'center' }}>
            <p style={{ color: '#999', fontSize: '14px' }}>相对湿度</p>
            <p style={{ fontSize: '18px', color: '#333' }}>{weatherData.humidity}</p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default WeatherPage;